<template>
  <span class="badge">
    <span class="flex"><slot></slot></span>
    <sup v-if="value !== 0" class="badge-content">{{
      value > maxValue ? "99+" : value
    }}</sup>
    <sup v-else-if="circle" class="badge-circle"></sup>
  </span>
</template>

<script lang="ts" setup>
withDefaults(
  defineProps<{
    maxValue?: number;
    value?: number;
    circle?: boolean;
  }>(),
  {
    maxValue: 99,
    value: 0,
    circle: false,
  }
);
</script>

<style lang="scss" scoped>
.badge {
  position: relative;

  &-content {
    position: absolute;
    top: -23%;
    right: -28%;
    @include promptMessCount(13px, 25px, 25px, 0.8);
  }

  &-circle {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 2px;
    @include setWidHei(10px, 10px);
    background-color: #f44545;
    border-radius: 50%;
  }
}
</style>
